<template>
  <div class="app-container">
    <div style="display: flex;justify-content: space-between">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="showAdd"
      >{{ $t('add') }}</el-button>
    </div>

    <el-row :gutter="10">
      <el-col v-for="(item,index) in productList" :key="index" :span="6">
        <el-card style="margin-top: 10px">
          <div @click="clickOtaProduct(item)">
            <div>{{ item.name }}</div>
            <div style="margin-top: 20px;display: flex;justify-content: flex-end">
              <el-button-group>
                <el-button
                  round
                  type="primary"
                  icon="el-icon-edit"
                  @click.stop="updateOtaProduct(item)"
                >{{ $t('edit') }}
                </el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  @click.stop="deleteOtaProduct(item)"
                >{{ $t('delete') }}
                </el-button>
              </el-button-group>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      :visible.sync="dialogProductFormVisible"
    >
      <el-form :model="product">
        <el-form-item :label="$t('name')">
          <el-input v-model="product.name" />
        </el-form-item>
        <el-form-item :label="$t('keyName')">
          <el-input v-model="product.idCode" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogProductFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdateProduct">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteOtaProduct,
  insertOtaProduct,
  updateOtaProduct,
  listOtaProduct
} from '@/api/ota/otaProductApi'
import {
  getCompanyId
} from '@/util/storage'
import {
  successNotice
} from '@/util/common'
export default {
  name: 'Ota',
  data() {
    return {
      companyId: getCompanyId(),
      productList: [],
      dialogProductFormVisible: false,
      product: {},
      productModel: 'insert'
    }
  },
  created() {
    this.listOtaProduct()
  }, methods: {
    clickOtaProduct(item) {
      this.product = item
      this.$router.push({
        path: '/ota/manage/' + item.productId,
        query: { productName: item.name, productId: item.productId }
      })
    },
    updateOtaProduct(item) {
      this.product = item
      this.productModel = 'update'
      this.dialogProductFormVisible = true
    },
    deleteOtaProduct(item) {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteOtaProduct({
            productId: item.productId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.listOtaProduct()
              that.product = {}
            }
          })
        })
    },
    showAdd() {
      this.product = {
        companyId: this.companyId,
        type: 'tcp'
      }
      this.productModel = 'insert'
      this.dialogProductFormVisible = true
    },
    addOrUpdateProduct() {
      switch (this.productModel) {
        case 'insert':
          insertOtaProduct({
            ...this.product
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(this)
            }
            this.listOtaProduct()
            this.dialogProductFormVisible = false
          })
          break
        case 'update':
          updateOtaProduct({
            ...this.product
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(this)
            }
            this.listOtaProduct()
            this.dialogProductFormVisible = false
          })
          break
      }
    },
    listOtaProduct() {
      listOtaProduct({
        companyId: this.companyId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.productList = data
          this.product = data[0]
        } else {
          this.productList = []
          this.product = null
        }
      })
    }
  }
}
</script>


